require('./PageRepairdetail.styl');
import { Toast,RadioField, Boxs, NavBar, Field, TextareaField, Context, Popup, Button, Scroller, Dialog } from 'saltui';
import User from 'salt-icon/lib/User'
import ToastError from 'salt-icon/lib/ToastError'
const { HBox, Box, VBox } = Boxs;
import { Control } from 'react-keeper';
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const classNames = require("classnames")
const Rollup = require('components/rollup');
const constants = require('clientConfig/util/constants')
const DistributionContent = (listdata = []) => {
    let arr = [];
    let obj = {};
    for (let item of listdata) {
        obj.content = (
            <HBox>
                <Box>{item.repairPersonName}</Box>
                <Box className="t-ML25">{item.phone}</Box>
            </HBox>
        );
        obj.value = {
            assignTaskPersonId: item.repairPersonId,
            id: item.id,
            assignTaskPersonPhone: item.phone,
            assignTaskPerson: item.repairPersonName
        }
        arr.push(obj);
        obj = {};
    }
    return arr
}
class Repairdetail extends React.Component {

    constructor(props) {
        super(props);
        this.id = Control.state.id;
        this.state = {
            id: '',
            phone: "",
            repairDatetime: "",
            maintenancePerson: "",
            privilegeFlag: "0",
            image: "",
            contacts: "",
            repairPerso: "",
            maintenancePersonPhone: "",
            repairAddress: "",
            description: "",
            repairType: "",
            text: '我',
            visible: false,
            content: '',
            wordcount: 0,//备注内容字计算
            repairStatus: [],//维修状态
            feedbackList: [],
            privilegeFlag: 0,
            personList: [],

        };
        this.popnum = 1
        this.selectPerson = {};
        this.handlePopupContentCb = this.handlePopupContentCb.bind(this)
        this.handleOnRightClick = this.handleOnRightClick.bind(this);
        this.handleOnLeftClickPop = this.handleOnLeftClickPop.bind(this);
        this.handleClickFooter = this.handleClickFooter.bind(this);
        this.handleTextChange = this.handleTextChange.bind(this)
        this.showPopupContent = this.showPopupContent.bind(this);
        this.handleClickBtn = this.handleClickBtn.bind(this);
        this.handleRadioChange = this.handleRadioChange.bind(this);
        this.handleClickFooterDistribution = this.handleClickFooterDistribution.bind(this);
    }
    handleOnLeftClick() {
        Control.go(-1)
    }
    handleOnLeftClickPop() {
        this.setState({ visible: false })
    }
    //右侧导航按钮
    handleOnRightClick() {
        if (JSON.stringify(this.selectPerson) == "{}") {
            Toast.show({
                content: '请选择要分配的联系人'
            });
            return;
        }
        let { id, assignTaskPerson, assignTaskPersonPhone, assignTaskPersonId } = this.selectPerson;
        Actions.assignPersonTask({ id: this.state.id, assignTaskPerson, assignTaskPersonPhone, assignTaskPersonId })
        this.selectPerson = {};
    }
    handleClickImg(url) {
        //预览图片
        ImageViewer.show({
            photos: [url],
            current: 0,
        });
    }
    /***** 维修反馈 *****/
    handleClickBtn() {
        let repairResult = this.repairResult;
        let repairStatus = this.repairStatus;
        if (!repairResult || !repairStatus) {
            Dialog.alert({
                title: '提示',
                content: '请选择维修结果',
                onConfirm() {
                },
            });
            return;
        }
        if (this.id) {
            Actions.saveRepairFeedback({ id: this.id, repairResult, repairStatus, remark: this.state.content });
        }
    }

    handleTextChange(name, newValue) {
        let t = this;
        if (name == 'content' && (this.state.wordcount + newValue.length > 200)) {
            return;
        }
        this.setState({
            [name]: newValue,
        }, () => {
            if (name == 'content') {
                this.setState({ wordcount: this.state.content.length })
            }
        });
    }
    handlePopupContentCb(msg, repairStatus) {
        this.repairResult = msg;
        this.repairStatus = repairStatus;
    }
    showPopupContent() {
        let t = this;
        const content = (
            <div>
                <NavBar
                    className={classNames({ "ios-nav-bar": window.isIphone })}
                    isShow={false}
                    title='维修反馈'
                    onLeftClick={this.handleOnLeftClickPop}
                    onRightClick={Context.noop}
                    rightText=''
                />
                <div className="repairdetail-comments">
                    <TextareaField
                        layout="h"
                        label=""
                        minRows={3}
                        maxRows={5}
                        placeholder="输入反馈详情(可不填)"
                        value={this.state.content}
                        tip={<div className="word-color">{this.state.activeRead && this.state.content.length > 0 ? <ToastError name="toast-error" fill="#fc3d39" onClick={this.handleClickDel} /> : null}<span>{this.state.wordcount}</span>/200字</div>}
                        onChange={(value) => {
                            this.handleTextChange('content', value)
                        }}
                    />
                    <Rollup
                        type="class"
                        title="维修结果"
                        listdata={this.state.repairStatus}
                        cb={this.handlePopupContentCb}
                    />
                    <Button type="primary" className="fs17" onClick={this.handleClickBtn}>提交</Button>
                </div>
            </div>
        );
        return content;
    }
    //维修反馈
    handleClickFooter() {
        let t = this;
        this.popnum = 1
        let cb = () => {

            this.setState({ visible: true })
        }
        Actions.getRepairStatus(cb)
    }
    /***** 任务分配 *****/
    showPopupDistributionContent() {
        let t = this;
        const content = (
            <div>
                <NavBar
                    className={classNames({ "ios-nav-bar": window.isIphone })}
                    isShow={false}
                    title='选择分配对象'
                    onLeftClick={this.handleOnLeftClickPop}
                    onRightClick={this.handleOnRightClick}
                    rightText='完成'
                />
                <Scroller autoRefresh={true} className="container">
                    <div className="repairdetail-distribution-comments">
                        <RadioField
                            required
                            onChange={this.handleRadioChange}
                            data={DistributionContent(this.state.personList)}
                        />
                    </div>
                </Scroller>

            </div>
        );
        return content;
    }
    handleClickFooterDistribution() {
        this.popnum = 0
        let cb = () => {
            this.setState({ visible: true })
        }
        Actions.getPersonList(cb)
    }
    handleRadioChange(value, index, data) {
        this.selectPerson = value;
    }
    showPopup() {
        let index = this.popnum;
        if (index == 0) {
            return this.showPopupDistributionContent()
        } else {
            return this.showPopupContent()
        }
    }
    render() {
        let t = this;
        return (
            <div className="repairdetail">
                <NavBar
                    className={classNames({ "ios-nav-bar": window.isIphone })}
                    isShow={false}
                    title='报修详情'
                    onLeftClick={this.handleOnLeftClick}
                    onRightClick={Context.noop}
                    rightText=''
                />
                <Scroller autoRefresh={true} className="container">
                    <div className="repairdetail-content">
                        <Field label="报修地址"  >
                            <span className="text-color">{t.state.repairAddress}</span>
                        </Field>
                        <Field label="联系人"  >
                            <span className="text-color">{t.state.contacts}<span className="t-ML5">({t.state.phone})</span></span>
                        </Field>
                        <Field label="维修人"  >
                            <span className="text-color">{t.state.maintenancePerson}<span className="t-ML5">{t.state.maintenancePersonPhone && `(${t.state.maintenancePersonPhone})`}</span></span>
                        </Field>
                        <Field label={t.state.repairType} className="t-MT10 title" />
                        <TextareaField
                            label=""
                            minRows={2} maxRows={5}
                            placeholder=""
                            value={t.state.description}
                        />
                        <HBox vAlign="end" className="t-PR10 t-PB10">
                            <Box flex={3}>
                                {t.state.image && <img className="t-ML10" onClick={this.handleClickImg.bind(this, constants.ImgUrl + t.state.image)} src={constants.ImgUrl + t.state.image} width="100" height="80" />}
                            </Box>
                            <Box flex={2} className="t-FAR text-color fs13">
                                <User className="t-MR10" width="20" height="20" fill="#999" />{this.state.repairPerson}
                                <p className="t-MT15">{this.state.repairDatetime}</p>
                            </Box>
                        </HBox>
                        {this.state.feedbackList.map((item, index) => {
                            return (
                                <div className="feedback">
                                    <p className="feedback-name">姓名:<span className="t-ML10">{item.feedbackPerson}</span></p>
                                    <p className="feedback-time fs12">时间:<span className="t-ML10 ">{item.feedbackTime}</span></p>
                                    <p className="feedback-remark fs13">反馈:<span className="t-ML10 ">{item.remark}</span></p>
                                </div>
                            )
                        })}
                    </div>
                </Scroller>
                <footer className="title">
                    <HBox className="t-FAC">
                        {this.state.privilegeFlag == 1 &&
                            <Box flex={1} onClick={this.handleClickFooterDistribution}>
                                任务分配
                            </Box>
                        }
                        {this.state.privilegeFlag == 1 && <span className="line" />}
                        <Box flex={1} onClick={this.handleClickFooter}>
                            维修反馈
                        </Box>
                    </HBox>
                </footer>
                <Popup
                    content={
                        this.showPopup()
                    }
                    animationType="slide-left"
                    visible={t.state.visible}
                />
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        Actions.fetch({ ...Control.state })
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Repairdetail, Reflux.connect(Store));

module.exports = Repairdetail;
